<template>
  <div class="app-container">
    <el-dialog title="新建订单" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" class="add-order-dialog">
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="订单类型">
          <el-input v-model="dialogForm.orderType" placeholder="男装/女装"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="dialogForm.customer"></el-input>
        </el-form-item>
        <el-form-item label="尺码">
          <el-input v-model="dialogForm.orderSize"></el-input>
        </el-form-item>
        <el-form-item label="图案">
          <el-input v-model="dialogForm.wantPic" placeholder="样衣-蛇我其谁"></el-input>
        </el-form-item>
        <el-form-item label="原图素材">
          <el-upload :class="`${picList.length >= 5 || uploading ? 'disabled' : ''}`" :on-success="upOk" :file-list="picList" :before-upload="beforeUpload" :headers='headers' action="/api/order/uploadFile" list-type="picture-card">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="showPic(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="removePic(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="dialogForm.remark" type="textarea" maxlength="200" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirm" :disabled='uploading'>确 定</el-button>
      </span>
    </el-dialog>
    <transition name="el-fade-in">
      <fullscreen-image v-if="picVisible" :img-src="dialogImageUrl" @close="picVisible = false"></fullscreen-image>
    </transition>
  </div>
</template>

<script>
import FullscreenImage from '../../../components/FullscreenImage.vue';
import { addOrder, uploadFile } from '@/api/order'
import { getToken } from '@/utils/auth'
export default {
  components: {
    FullscreenImage
  },
  props: {
    show: { type: Boolean, default: false }
  },
  watch: {
    show(val) {
        this.dialogVisible = val
    }
  },
  data() {
    return {
      dialogVisible: false,
      picList: [],
      dialogForm: {
        orderType: '',
        customer: '',
        orderSize: '',
        wantPic: '',
        remark: '',
      },
      dialogImageUrl: '',
      picVisible: false,
      uploading: false,
      headers: {
        Authorization: `Bearer ${getToken()}`,
      },
    }
  },
  mounted() {
  },
  methods: {
    async confirm() {
      const now = new Date()
      const dateStr = (now.getFullYear() + '').slice(2) + (now.getTime() + '').slice(2)
      const random = parseInt(Math.random() * 80) + 10
      const { orderType, customer, orderSize, wantPic, remark } = this.dialogForm
      const params = {
        picList: this.picList.map(item => { return { url: item.url, name: item.name } }),
        designList: [],
        orderType, customer, orderSize, wantPic, remark,
        orderNum: dateStr + random
      }
      const res = await addOrder(params)
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '新增成功'
        })
        this.$emit('refresh')
        this.handleClose()
      }
    },

    beforeUpload(file) {
      const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
      const isSmall = file.size < 1024 * 1024 * 5
      if (!isPic) { this.$message({ type: 'error', message: '仅支持jpg、png格式图片' }) }
      if (!isSmall) { this.$message({ type: 'error', message: '图片大小不能超过5M' }) }
      if (isPic && isSmall) {
        this.uploading = true
      } else {
        return false
      }
    },
    upOk(res, file, fileList) {
      const date = res.data.destination.slice(-10)
      file.url = `/public/images/${date}/${res.data.filename}`
      this.picList = fileList
      this.uploading = false
    },
    removePic(file) {
      this.$confirm('确认删除该文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.picList = this.picList.filter(item => item.url !== file.url)
      }).catch(() => {})
    },
    showPic(file) {
      this.dialogImageUrl = file.url;
      this.picVisible = true;
    },
    handleClose() {
      this.dialogVisible = false
      this.dialogForm.picList = ''
      this.dialogForm.remark = ''
      this.$emit('update:show', false)
    },
  }
}
</script>
<style lang="scss">
.add-order-dialog {
  .disabled .el-upload--picture-card{
    display: none;
  }
}
</style>

